Animations in web browsers typically come in two forms: native, declarative ones, such as the <animate> element in Scalable Vector Graphics (SVG), and those that are implemented imperatively in script, such as Javascript. These script-based animations are most often performed by scheduling a callback to perform custom script based animations. Typically, callbacks are registered using either a setTimeout( ) method that specifies a particular time value, in milliseconds, when a callback is desired, or a setInterval( ) method that specifies an interval over which callbacks are desired to be received. The callbacks are used by a Javascript engine to execute animation code to update an object model so that a new display can be rendered by a rendering engine.
There are several challenges with this approach including over-notification and unnecessarily high power consumption. Specifically, if callbacks occur too rapidly, some of the work that is done by the script engine will not be rendered because it will have been replaced with more subsequent work. This leads to power inefficiencies stemming from unnecessary work and choppy animations. Specifically, a disadvantage of this approach is that the author of the animation script has no idea what the ideal frequency for updating their animation is. Instead, the easiest way for the author is to simply call setTimeout( ) with a very small value, which in practice, will be clamped by the system to some minimum time such as 10 ms. It is not likely that 100 updates per second are needed for the animation, especially if the page is in a background tab or the browser window is minimized.